<template>
  <d2-container>
    <div class="flex-1">
      <div class="flex-1 row-ac">
        <div class="panel-box flex-1 row-ac">
          <div class="icon-box row" style="background-color: #6ccac9;">
            <span class="iconfont icon-huiyuan21"></span>
          </div>
          <div class="flex-1 row-a-j-fc">
            <div class="font-s-5">{{ statsDetail.all_users_count }}</div>
            <div>用户数</div>
          </div>
        </div>
        <div class="panel-box flex-1 row-ac">
          <div class="icon-box row" style="background-color: #0C9C00;">
            <span class="iconfont icon-01_huiyuanshengjimingxiguanli"></span>
          </div>
          <div class="flex-1 row-a-j-fc">
            <div class="font-s-5">{{ statsDetail.new_user_count }}</div>
            <div>今日新增</div>
          </div>
        </div>
        <div class="panel-box flex-1 row-ac">
          <div class="icon-box row" style="background-color: #57c8f2;">
            <span class="iconfont icon-baobiaoguanli"></span>
          </div>
          <div class="flex-1 row-a-j-fc">
            <div class="font-s-5">{{ statsDetail.today_adv_integral }}</div>
            <div>今日广告展示</div>
          </div>
        </div>
        <div class="panel-box flex-1 row-ac">
          <div class="icon-box row" style="background-color: #FD5454;">
            <span class="iconfont icon-baobiaoguanli"></span>
          </div>
          <div class="flex-1 row-a-j-fc">
            <div class="font-s-5">{{ statsDetail.yesterday_adv_integral }}</div>
            <div>昨日广告展示</div>
          </div>
        </div>
      </div>
      <div class="flex-1 mt-3 d-f mr-3">
        <div class="" style="width: 30%;">
          <el-descriptions class="margin-top" :column="1" border size="medium">
            <el-descriptions-item>
              <template slot="label" class="row">
                订单总数
              </template>
              <div class="text-danger"> {{ statsDetail.total_orders }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                待发货
              </template>
              <div class="text-danger">{{ statsDetail.shipped_orders }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                未付款
              </template>
              <div class="text-danger">{{ statsDetail.unpaid_orders }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                已完成
              </template>
              <div class="text-danger">{{ statsDetail.completed_orders }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                待开票
              </template>
              <div class="text-danger">{{ statsDetail.bill_orders }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="" style="width: 30%;margin-left: 5%;">
          <el-descriptions class="margin-top" :column="1" border size="medium">
            <el-descriptions-item>
              <template slot="label" class="row">
                商品总数
              </template>
              <div class="text-danger">{{ statsDetail.product_count }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                上架
              </template>
              <div class="text-danger">{{ statsDetail.product_on }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                下架
              </template>
              <div class="text-danger">{{ statsDetail.product_off }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="" style="width: 30%;margin-left: 5%;">
          <el-descriptions class="margin-top" :column="1" border size="medium">
            <el-descriptions-item>
              <template slot="label" class="row">
                会员总数
              </template>
              <div class="text-danger">{{ statsDetail.total_members }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                今日新增
              </template>
              <div class="text-danger">{{ statsDetail.new_members }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                普通会员
              </template>
              <div class="text-danger">{{ statsDetail.ordinary_members }}<span class="ml-2">个</span></div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="flex-1 mr-3 mt-3 d-f">
        <div class="flex-1">
          <div class="pb-2 font-s-3 font-w ml-3">10天销售数据图</div>
          <div class="flex-1" id="salesChart" style="height: 400px;"></div>
        </div>
        <div class="sales-chart ml-3 border">
          <div class="flex-1 mx-3 row-ac py-1">
            <div class="flex-1 font-s-3 font-w">今日广告排行</div>
            <div class="font-s-1 text-light-grey">更多<i class="iconfont icon-xiangyou" style="font-size: 12px;"></i>
            </div>
          </div>
          <div class="flex-1 mx-2">
            <el-table :data="usersalesList" stripe>
              <el-table-column align="center" label="排行" type="index" width="40" />
              <el-table-column label="商品名称" prop="nickname" :show-overflow-tooltip="true" width="200" />
              <el-table-column align="center" label="销量" prop="count" width="40" />
            </el-table>
          </div>
        </div>
      </div>
    </div>

  </d2-container>
</template>

<script>
  import {
    statsUrl,
    productsalesUrl
  } from "@/utils/interface"
  import * as echarts from "echarts";
  import util from '@/libs/util.js'
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    name: 'index',
    data() {
      return {
        statsDetail: '',
        dayssalesList: [],
        xAxisData: [],
        yAxisData: [],
        productsales: []
      }
    },
    mounted() {
      this.$get(statsUrl).then(res => {
        this.statsDetail = res.data.data;
        this.dayssalesList = res.data.data.integral_data_list;
        this.usersalesList = res.data.data.user_integral_data;

        this.xAxisData = this.dayssalesList.map(item => item.day);
        this.yAxisData = this.dayssalesList.map(item => item.integral_count);
        console.log( this.xAxisData, this.yAxisData);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
          },
          xAxis: [{
            type: 'category',
            data: this.xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: {},
          series: [{
            type: "bar", //形状为柱状图
            data: this.yAxisData,
            itemStyle: {
              barWidth: 2 // 设置柱子宽度为10像素
            }
          }]
        };
        const salesChart = echarts.init(document.getElementById("salesChart"));
        salesChart.setOption(option);
      });
    },
    methods: {
      ...mapActions('d2admin/account', [
        'login'
      ])
    }
  }
</script>

<style lang="scss">
  .panel-box {
    height: 103px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    border: 1px solid #dddddd;
    margin-right: 25px;
    margin-bottom: 15px;

    .icon-box {
      width: 35%;
      height: 103px;
      border-radius: 4px 0 0 4px;
      color: #fff;

      .iconfont {
        font-size: 58px;
      }
    }
  }

  .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-weight: 400;
    line-height: 1.5;
  }

  .sales-chart {
    width: 380px;
    height: 400px;
  }
</style>
